<style lang="less">
    @import '../../../styles/common.less';
</style>

<template>
    <div class="user-list">
        <Card>
            <p slot="title">
                <Icon type="mouse"></Icon>
                点击搜索进行搜索
            </p>
            <Row>
                <Input v-model="query.name" placeholder="请输入名称搜搜..." style="width: 200px"/>
                <span @click="handleSearch" style="margin: 0 10px;">
                    <Button type="primary" icon="search">搜索</Button>
                </span>
                <Button
                        @click="add"
                        type="primary" shape="circle" icon="plus">
                    新增用户
                </Button>
            </Row>
        </Card>
        <Card>
            <Row>
                <Table :columns="columns" :data="dataList" border></Table>
            </Row>
        </Card>
        <Card>
            <Row>
                <Page :current.sync="page.pageNumber"
                      :page-size="page.pageSize"
                      :total.sync="page.totalCount"
                      @on-change="handlePage"
                      @on-page-size-change='handlePageSize'
                      show-elevator show-sizer>
                </Page>
            </Row>
        </Card>
        <Modal
                v-model="editVisible"
                width="960"
                class="form-modal"
                :mask-closable="false"
        >

            <userEdit :user-id="editId" @on-done="handleEditDone"></userEdit>
            <div slot="footer">

            </div>
        </Modal>
        <Modal
                v-model="addVisible"
                width="960"
                class="form-modal"
                :mask-closable="false"
        >
            <userAdd @on-done="handleAddDone"></userAdd>
            <div slot="footer">

            </div>
        </Modal>
    </div>
</template>

<script>
    import userEdit from './user-edit';
    import userAdd from './user-add';
    import userRequest from '../../../app/api/core/user';
    import dictionary from '../../../app/common/lib/dictionary';
    import prompt from '@/libs/prompt';
    import permission from '../../../app/common/auth/permission';


    export default {
        name: 'user-list',
        data() {
            return {
                editVisible: false,
                addVisible: false,
                editId: '',
                query: {name: ''},
                columns: [
                    {
                        key: 'index',
                        title: '序号',
                        width: 70,
                        render: (h, params) => {
                            var index = params.index;
                            return h('div', [
                                h('label', {}, (index + 1))
                            ]);
                        }
                    },
                    {
                        key: 'name',
                        title: '姓名'
                    },
                    {
                        key: 'account',
                        title: '帐号'
                    },
                    {
                        key: 'nickname',
                        title: '昵称'
                    },
                    {
                        key: 'flagName',
                        title: '有效标志'
                    },
                    {
                        key: 'createTime',
                        title: '创建时间'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 230,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                        disabled: !permission.has('manage.core.user.addOrUpdate')
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.row.id);
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                        disabled: !permission.has('manage.core.user.delete')
                                    },
                                    on: {
                                        click: () => {
                                            this.delete(params.row.id);
                                        }
                                    }
                                }, '删除'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                        disabled: !permission.has('manage.core.user.toGeneral')
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.toAdmin(params.row.id);
                                        }
                                    }
                                }, '设为管理员')
                            ]);
                        }
                    }
                ],
                dataList: [],
                page: {
                    pageSize: 10,
                    pageNumber: 1,
                    totalCount: 0
                }
            };
        },
        components: {userEdit, userAdd},
        methods: {
            init() {
                this.search();
            },
            handleSearch: function () {
                this.page.pageNumber = 1;
                this.search();
            },
            handleCancel() {
                this.data = this.initTable;
            },
            handlePage(value) {
                var own = this;
                own.page.pageNumber = value;
                this.search();
            },
            handlePageSize(value) {
                var own = this;
                own.page.pageSize = value;
                this.search();
            },
            search() {
                var own = this;
                var query = own.query;
                var page = own.page;

                userRequest.list(query, page, function (data) {
                    if (data.body && data.body.list) {
                        var body = data.body;
                        var list = body.list;
                        dictionary.setName(list, 'common', 'flag', 'flagName');
                        own.dataList = list;
                    }
                    if (data.body && data.body.page) {
                        var body = data.body;
                        var page = body.page;
                        var totalCount = page.totalCount;
                        own.page.totalCount = totalCount;
                    }
                });

            },
            openEdit(id) {
                this.editId = id;
                this.editVisible = true;
            },
            add() {
                this.addVisible = true;
            },
            edit(id) {
                this.openEdit(id);
            },
            delete(id) {
                var own = this;
                this.$Modal.confirm({
                    title: '确定',
                    content: '<p>确定删除？</p></p>',
                    onOk: () => {
                        userRequest.delete(id, function (data) {
                            own.search();
                        });
                    },
                    onCancel: () => {

                    }
                });
            },
            toAdmin(id) {
                var own = this;
                userRequest.toAdmin(id, function (data) {
                    own.search();
                });
            },
            handleEditDone(edit, info, user) {
                if (info.success) {
                    this.editVisible = false;
                    this.handleSearch();
                    prompt.message(info, '保存成功。', '保存失败！');
                }

            },
            handleAddDone(edit, info, user) {
                if (info.success) {
                    this.addVisible = false;
                    this.search();
                    prompt.message(info, '保存成功。', '保存失败！');
                }
            }
        },
        mounted() {
            this.init();
        }
    };
</script>
